<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">

  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/index.css" />
  </head>

  <body>
    <div class="navigation">
      <a class="user-panel" onmouseover="userMenuOver()" onmouseout="userMenuOut()">
        <div class="user-pic">
          <img class="user-img" src="images/avatar.png">
        </div>
        <span class="user-name">
			风过暖城
          <i class="icon-angle-down"></i>
        </span>
      </a>
      <div class="aboutuser">
      	<!--用户下拉面板-->
      </div>
      <div class="bas-nav">
        <ul>
          <li class="home" onmouseover="homeOver()" onmouseout="homeOut()">
            <a href="#"><i></i></a>
            <ul class="dropdown-menu-home" id="dropdown-menu-home" onmouseover="homeMenuOver()">
						<li>
							<i class="graph graph-1 h16"></i>
							<span>未读日报</span>
						</li>
						<li>
							<i class="graph graph-2 h16"></i>
							<span>未读事项</span>
						</li>
						<li>
							<i class="graph graph-3 h16"></i>
							<span>事项的新反馈</span>
						</li>
						<li>
							<i class="graph graph-4 h16"></i>
							<span>新完成事项</span>
						</li>
						<li>
							<i class="graph graph-5 h16"></i>
							<span>@我的新反馈</span>
						</li>
						<li>
							<i class="graph graph-6 h16"></i>
							<span>聊天消息</span>
						</li>
						<li>
							<i class="graph graph-7 h16"></i>
							<span>提醒</span>
						</li>
						<li>
							<i class="graph graph-8 h16"></i>
							<span>关注申请</span>
						</li>
						<li>
							<i class="graph graph-9 h16"></i>
							<span>加入申请</span>
						</li>
						<li >
							<i class="graph graph-10 h16"></i>
							<span>共享申请</span>
						</li>
					</ul>
          </li>
          <li class="task">
            <a href="#"><i></i>任务</a>
          </li>
          <li class="replay">
            <a href="#"><i></i>审批</a>
          </li>
          <li class="more" onmouseover="moreOver()" onmouseout="moreOut()">
            <a href="#"><i></i>更多应用</a>
            <ul class="dropdown-menu-more" id="dropdown-menu-more" onmouseover="moreMenuOver()">
            	<li>
            		<dl>
            			<dt>汇报</dt>
            			<dd><a>
            				<i class="graph h16 graph-target"></i>
            				<span>目标管理</span>
            			</a></dd>
            			<dd><a>
            				<i class="graph h16 graph-small-blog"></i>
            				<span>工作日报</span>
            			</a></dd>
            			<dd><a>
            				<i class="graph h16 graph-report"></i>
            				<span>计划报告</span>
            			</a></dd>
            		</dl>
            		<dl>
            			<dt>CRM</dt>
            			<dd><a>
            				<i class="graph h16 graph-clue"></i>
            				<span>线索</span>
            			</a></dd>
            			<dd><a>
            				<i class="graph h16 graph-crm1"></i>
            				<span>客户</span>
            			</a></dd>
            			<dd><a>
            				<i class="graph h16 graph-contact"></i>
            				<span>联系人</span>
            			</a></dd>
            			<dd><a>
            				<i class="graph h16 graph-chance"></i>
            				<span>商机</span>
            			</a></dd>
            			<dd><a>
            				<i class="graph h16 graph-contract"></i>
            				<span>合同</span>
            			</a></dd>
            			<dd><a>
            				<i class="graph h16 graph-production"></i>
            				<span>产品</span>
            			</a></dd>
            			<dd><a>
            				<i class="graph h16 graph-competitor"></i>
            				<span>竞争对手</span>
            			</a></dd>
            			<dd><a>
            				<i class="graph h16 graph-crmSummary"></i>
            				<span>CRM统计</span>
            			</a></dd>
            		</dl>
            	</li>
            	<li>
            		<dl>
            			<dt>协作</dt>
            			<dd><a>
            				<i class="graph h16 graph-goal"></i>
            				<span>项目管理</span>
            			</a></dd>
            			<dd><a>
            				<i class="graph h16 graph-small-task"></i>
            				<span>任务协作</span>
            			</a></dd>
            			<dd><a>
            				<i class="graph h16 graph-small-agenda"></i>
            				<span>日程安排</span>
            			</a></dd>
            			<dd><a>
            				<i class="graph h16 graph-doc1"></i>
            				<span>知识文档</span>
            			</a></dd>
            		</dl>
            		<dl>
            			<dt>审批</dt>
            			<dd><a>
            				<i class="graph h16 graph-small-flow"></i>
            				<span>审批流程</span>
            			</a></dd>
            		</dl>
            	</li>
            	<li>
            		<dl>
            			<dt>其他</dt>
            			<dd><a>
            				<i class="graph h16 graph-stat"></i>
            				<span>统计报表</span>
            			</a></dd>
            			<dd><a>
            				<i class="graph h16 graph-format"></i>
            				<span>业务表单</span>
            			</a></dd>
            			<dd><a>
            				<i class="graph h16 graph-atend"></i>
            				<span>出勤</span>
            			</a></dd>
            			<dd><a>
            				<i class="graph h16 graph-salarybill"></i>
            				<span>工资单</span>
            			</a></dd>
            		</dl>
            		<dl>
            			<dt>审批</dt>
            			<dd><a>
            				<i class="graph h16 graph-enterprise"></i>
            				<span>微信企业号</span>
            			</a></dd>
            			<dd><a>
            				<i class="graph h16 graph-wechatservice"></i>
            				<span>微信公众号</span>
            			</a></dd>
            		</dl>
            	</li>
            </ul>
          </li>
        </ul>
      </div>
      <div class="quick-menu">
        <ul>
          <li class="morefunction" onmouseover="moreThingsOver()" onmouseout="moreThingOut()">
            <a href="#"><i class="graph h16 graph-plus"></i></a>
            <ul class="dropdown-menu-plus" id="dropdown-menu-plus" onmouseover="thingsOver()">
            	<li>
	            	<a><i class="graph graph-blog h20"></i>写日报</a>
            	</li>
            	<li>
	            	<a><i class="graph graph-task h20"></i>安排任务</a>
            	</li>
            	<li>
	            	<a><i class="graph graph-agenda h20"></i>安排日程</a>
            	</li>
            	<li>
	            	<a><i class="graph graph-doc h20"></i>上传文件</a>
            	</li>
            	<li>
	            	<a><i class="graph graph-flow h20"></i>提交申请</a>
            	</li>
            	<li>
	            	<a><i class="graph graph-goal1 h20"></i>添加项目</a>
            	</li>
            	<hr />
            	<li>
	            	<a><i class="graph graph-crm h20"></i>新建客户</a>
            	</li>
            	<li>
	            	<a><i class="graph graph-linkman h20"></i>新建联系人</a>
            	</li>
            	<li>
	            	<a><i class="graph graph-record h20"></i>客户联系记录</a>
            	</li>
            </ul>
          </li>
          <li class="search">
            <div class="search-box">
              <input type="text" class="placeholder-sm" placeholder="全局搜索">
              <a href="#">
                <i></i>
              </a>
            </div>

          </li>
          <li class="qq">
            <a href="#"><i></i></a>
          </li>
          <li class="eteams" onmouseover="logoOver()" onmouseout="logoOut()">
            <a href="#"><i class="eteams-text"></i><i class="eteams-arrows-down"></i></a>
          	<ul class="dropdown-menu-logo" id="dropdown-menu-logo" onmouseover="logoMenuOver()">
							<li><a>客户端下载</a></li>
							<li><a>微信号</a></li>
							<li><a>邀请同事</a></li>
							<li><a>创建或加入团队</a></li>
							<hr />
							<li><a>个人设置</a></li>
							<li><a>团队成员设置</a></li>
							<li><a>系统设置</a></li>
							<hr />
							<li><a>推荐拿福利</a></li>
							<hr />
							<li><a>帮助</a></li>
							<li><a>意见反馈</a></li>
						</ul>
          </li>
        </ul>
      </div>
    </div>
    <div class="content">
      <div class="content-left">
        <div class="settings"><i></i>个人设置</div>
        <ul id="content-left" onmouseover="userSetting()">
          <li>
            <a href="#" class="li-selected"><i></i>个人资料</a>
          </li>
          <li>
            <a href="#"><i></i>头像设置</a>
          </li>
          <li>
            <a href="#"><i></i>修改密码</a>
          </li>
          <li>
            <a href="#"><i></i>消息设置</a>
          </li>
          <li>
            <a href="#"><i></i>应用设置</a>
          </li>
          <li>
            <a href="#"><i></i>首页设置</a>
          </li>
          <li>
            <a href="#"><i></i>申请加入团队列表</a>
          </li>
        </ul>
      </div>
      <div class="content-right">
        <div class="main-hd">
          <i class="graph-hruser"></i>
          <ul id="main-hd" onmouseover="mainHeader()">
            <li class="selected">
              <a href="#">基本信息</a>
            </li>
            <li>
              <a href="#">用户下属</a>
            </li>
            <li>
              <a href="#">个人信息</a>
            </li>
            <li>
              <a href="#">人事合同</a>
            </li>
            <li>
              <a href="#">第三方账号</a>
            </li>
            <li>
              <a href="#">邮箱设置</a>
            </li>
            <li>
              <a href="#">更多<i></i></a>
            </li>
          </ul>
        </div>
        <div class="p-20">
          <div class="userinfo-container">
            <div class="userinfo-main">
              <div class="user-info-first">
                <ul>
                  <li>
                    <lable class="control-label">姓名： </lable>
                    <lable class="control-label"></lable>
                    <input class="form-control textinput"/>
                  </li>
                  <li>
                    <lable class="control-label">账号： </lable>
                    <input class="form-control textinput"/>
                  </li>
                  <li>
                    <lable class="control-label">邮箱： </lable>
                    <input class="form-control textinput" onfocusout="testEmail(this)"/>
                    <a href="#" class="binding" onclick="bindingEmail()">[绑定]</a>
                    <lable class="binding-hint">为了您的账号安全，请尽快绑定邮箱！</lable>
                  </li>
                  <li>
                    <lable class="control-label">手机： </lable>
                    <input class="form-control textinput" onfocusout="testTelephone(this)"/>
                    <a href="#" class="binding" onclick="bindingPhone()">[绑定]</a>
                    <lable class="binding-hint">为了您的账号安全，请尽快绑定手机号码！</lable>
                  </li>
                  <li class="li-password">
                    <lable class="control-label">密码： </lable>
                    <a class="formbutton" href="#" onclick="resetpassword()"><i></i>重置密码</a>
                  </li>
                  <li class="li-sex">
                    <lable class="control-label">性别： </lable>
                    <input type="radio" class="sex" name="sex">男
                    <input type="radio" class="sex" name="sex">女
                  </li>
                </ul>
              </div>
              <div class="user-info-second">
                <ul>
                  <li>
                    <lable class="control-label">入职时间： </lable>
                    <input class="form-control textinput"/>
                  </li>
                  <li>
                    <lable class="control-label">电话： </lable>
                    <input class="form-control textinput"/>
                  </li>
                  <li>
                    <lable class="control-label">工号： </lable>
                    <input class="form-control textinput"/>
                  </li>
                  <li>
                    <lable class="control-label">部门： </lable>
                  </li>
                  <li>
                    <lable class="control-label">兼职部门： </lable>
                  </li>
                  <li>
                    <lable class="control-label">岗位： </lable>
                  </li>
                  <li>
                    <lable class="control-label">职级： </lable>
                  </li>
                  <li>
                    <lable class="control-label">上级： </lable>
                  </li>
                  <li>
                    <lable class="control-label">助理： </lable>
                  </li>
                  <li>
                    <lable class="control-label">权限开放： </lable>
                  </li>
                  <li>
                    <lable class="control-label">角色： </lable>
                    <input class="role" type="checkbox" name="role">
                    <lable class="role" >系统管理员</lable>
                  </li>
                  <li>
                    <lable class="control-label">状态： </lable>
                  </li>
                </ul>
              </div>
              <div class="btn-group">
                <a href="#" class="formbutton">退出团队</a>
                <a href="#" class="formbutton">工作交接</a>
              </div>
            </div>
            <div class="userinfo-side">
              <div>
                <div class="panel-alpha">
                  <div class="dt">其他权限说明</div>
                  <div class="dd">
                    <p>1. 助理：代表可以查看本人下属的工作内容</p>
                    <p>2. 权限开放：代表可以把自己的所有工作内容开放给其他同事查阅</p>
                    <p>3. 其他上级：同上级</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="wechat">
      <i></i> 企业微信
    </div>
    <div id="modal" class="modal"></div>
    
    <div id="bindingEmail" class="binding-details">
    		<div class="modal-header">
    			<button class="close" onclick="closeEmail()">x</button>
    			<h5 class="modal-title">绑定邮件</h5>
    		</div>
    		<div class="modal-body-tip">
    			<span>为了保证您的帐号安全，更换密保邮件前请先进行安全验证</span>
    		</div>
    		<div class="modal-body-input">
    			<label>邮件：</label>
    			<input onfocusout="testEmail(this)" />
    			<button class="buttonColor">发送验证码</button>
    			<span id="emailWarning" class="emailError"></span>
    		</div>
    		<div class="modal-body-input">
    			<label>验证码：</label>
    			<input />
    			<span id="emailvalicodeWarning"></span>
    		</div>
    		<div class="modal-body-input hasButton">
    			<button class="yesButton">确定</button>
    			<button class="buttonColor" onclick="closeEmail()">取消</button>
    		</div>
    	</div>
    <div id="bindingPhone" class="binding-details">
    		<div class="modal-header">
    			<button class="close" onclick="closePhone()">x</button>
    			<h5 class="modal-title">绑定手机</h5>
    		</div>
    		<div class="modal-body-tip">
    			<span>为了保证您的帐号安全，更换密保手机前请先进行安全验证</span>
    		</div>
    		<div class="modal-body-input">
    			<label>手机：</label>
    			<input onfocusout="testTelephone(this)"  placeholder="手机"/>
    			<button class="buttonColor">发送验证码</button>
    			<span id="phoneWarning" class="emailError"></span>
    		</div>
    		<div class="modal-body-input">
    			<label>验证码：</label>
    			<input placeholder="验证码"/>
    			<span id="phonevalicodeWarning"></span>
    		</div>
    		<div class="modal-body-input hasButton">
    			<button class="yesButton">确定</button>
    			<button class="buttonColor" onclick="closePhone()">取消</button>
    		</div>
    	</div>
    <div id="resetPassword" class="binding-details">
    		<div class="modal-header password-header">
    			<button class="close" onclick="closePassword()">x</button>
    			<h5 class="modal-title">重置密码</h5>
    		</div>
    		<div class="modal-body-input">
    			<label>新密码：</label>
    			<input />
    			<span id="emailWarning" class="emailError"></span>
    		</div>
    		<div class="modal-body-input">
    			<label>密码确认：</label>
    			<input />
    			<span id="valicodeWarning"></span>
    		</div>
    		<div class="modal-body-input hasButton">
    			<button class="yesButton">确定</button>
    			<button class="buttonColor" onclick="closePassword()">取消</button>
    		</div>
  	</div>
		<div id="user-menu" class="user-menu" onmouseover="menuon()" onmouseout="menuout()">
    		<div class="user-menu-left">
    			<img src="images/head.png" class="head" />
    			<button>未完成事项</button>
    			<button>关注事项</button>
    			<button>标签</button>
    			<button>个人设置</button>
    		</div>
    		<div class="user-menu-top">
    			<span>在此您可以切换到关注的人或下属的工作空间</span>
    			<input type="text" placeholder="人员搜索" />
    		</div>
    		<ul>
    			<li class="user-menu-li user-li-selected" onmouseover="changeBody1(this)">我关注的人</li>
    			<li class="user-menu-li" onmouseover="changeBody2(this)">团队成员</li>
    		</ul>
    		<div id="user-menu-body1" class="user-menu-body">
    			<span>目前没有关注人,您可以点击<a>加关注</a>添加关注人！</span>
    			<button class="firstbutton">加关注</button>
    			<button>更多关注</button>
    		</div>
    		<div id="user-menu-body2" class="user-menu-body body2">
    			<span>团队成员只有您一人，<a>邀请同事</a>加入协作吧！</span>
    		</div>
    		<div class="user-menu-bottom">
    			<button class="button2">团队成员设置</button>
    			<button class="button1">邀请同事</button>
    		</div>
    	</div>
    <script src="js/jquery-2.1.1.min.js"></script>
    <script src="js/eteams.js"></script>
  </body>

</html>